<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>个人主页</title>
        <style lang="">
            body{
                background-color: #eee;
                margin: 50px 0 0;
            }

            #nav{
                position: fixed;
                left: 0;
                top: 0;
                width: 100%;
                height: 50px;
                background-color: blue;
                padding: 0 50px;
                line-height: 50px;
            }
            #nav a{
                background-color: yellow;
                text-decoration: none;
                margin: 0 20px;
                /* 把a标签撑高 */
                /* display: inline-block;
                line-height: 50px; */
                /* 把a标签撑高：调整a的内边距和父标签的行高 */
                padding: 17px;
            }

            #banner img{
                width: 100%;
                /* 最小宽度 */
                min-width: 800px;
            }

            #main{
                width: 800px;
                margin: 40px auto;
            }

            .sec h2{
                display: inline-block;
                border-right: 5px red solid;
                padding-right: 10px;
            }
            .sec p{
                font-size: 18px;
                text-indent: 2em;
            }
            .sec img{
                width: 100%;
            }

            #img-pos{
                position: relative;
            }
            #img-pos .pos{
                width: 56px;
                position: absolute;
            }
            #img-pos .tl{  
                top: 0;
                left: 0;
            }
            #img-pos .tr{
                top: 0;
                right: 0;
            }
            #img-pos .bl{
                bottom: 0;
                left: 0;
            }
            #img-pos .br{
               bottom: 0;
               right: 0;
            }
            #img-pos .mid{
                width: 150px;
                position: absolute;
                /* top: calc(50% - 50px);
                left: calc(50% - 50px); */
                top: 90px;
                left: 370px;
            }
        </style>
    </head>
    <body>
        <!-- 导航条 -->
        <div id="nav">
            <a href="#school">我的学校</a>
            <a href="#hometown">我的家乡</a>
            <a href="#classmate">我的同学</a>
            <a href="./20-6-30 表单元素、宝钢/20-6-30 表单元素、宝钢/宝钢/index.html">宝钢</a>
            <a href="./20-7-1 东莞市展业电子有限公司/20-7-1 东莞市展业电子有限公司/宝钢/index.html">东莞市有限公司</a>
            <a href="./企汇网/7-22最后一次练习/作业.html">企汇网</a>
        </div>
        <!-- 横条 -->
        <div id="banner">
            <img src="./bg.jpg" alt="横幅">
        </div>
        <!-- 主体部分 -->
        <div id="main">
            <div class="title">
                <center><h1>张文烽的个人主页</h1></center>  
                <center><h3 id="school">欢迎来到我的个人主页</h3></center>
            </div>
            <div class="sec">
                <h2>我的学校</h2>
                <p>郑州轻工业大学是河南省人民政府和国家烟草专卖局共建高校，卓越工程师教育培养计划高校、河南省重点建设骨干高校、河南省博士学位授予重点立项建设单位，入选河南省优势特色学科建设工程。</p>
                <p>1977年，郑州轻工业学院创建，原隶属国家轻工业部；1998年转属河南省人民政府；2009年被列为河南省博士学位授予单位立项建设高校；2011年成为河南省人民政府和国家烟草专卖局共建高校；2018年，学校被确定为河南省博士学位授予重点立项建设单位，12月更名为郑州轻工业大学</p>
                <img src="./大学.jpg" alt="">
                <hr id="hometown" style="margin-bottom: 40px;">
            </div>
            <div id="hometown" class="sec">
                <h2>我的家乡</h2>
                <p>先主山上原有先主庙一处，规模较大，年代久远，约为清康熙年间建成，并于乾隆年间进行了一次大的翻修与扩建，此后历代也进行过规模较小的修缮，主要供奉三国时期的刘备、关羽、张飞三兄弟和曾躬耕与南阳卧龙岗上的智圣诸葛亮。建国后，在文化大革命前期由于“反迷信”口号的影响，规模庞大，历史悠久的先主庙被毁于一旦，实在令人惋惜。先主山以北500米的石家村小学（又名石宋李小学）的几间青砖校舍，就是用先主庙拆下来的青砖木材建的，现在青砖校舍已经变成一片废墟，也算是老先主庙最后留下来的东西。后来人们又在山南面修建新庙，只是规模很小，只有三间房子和一个小院子。几十年后，由于先主庙墙体迸裂，无法修缮，于是人们弃之并在山东南面重修新庙，规模仍然只有三间房子和一个院子，此庙保存至今。</p>
                <img src="./家乡.jpg" alt="">
                <hr id="classmate" style="margin-bottom: 40px;">
            </div>
            <div class="sec">
                <h2>我的同学</h2>
                <p>冰心（1900～1999）现、当代女作家，儿童文学作家。原名谢婉莹，笔名冰心女士，男士等。原籍福建长乐，生于福州，幼年时代就广泛接触了中国古典小说和译作。1918年入协和女子大学预科，积极参加五四运动。1919年开始发表第一篇小说《两个家庭》，此后，相继发表了《斯人独惟悴》、《去国》等探索人生问题的“问题小说”。同时，受到泰戈尔《飞鸟集》的影响，写作无标题的自由体小诗。这些晶莹清丽、轻柔隽逸的小诗，后结集为<繁星>和《春水》出版，被人称为“春水体”。1921年加入文学研究会。同年起发表散文《笑》和《往事》。1923年毕业于燕京大学文科。赴美国威尔斯利女子大学学习英国文学。在旅途和留美期间，写有散文集《寄小读者》，显示出婉约典雅、轻灵隽丽、凝炼流畅的特点，具有高度的艺术表现力，比小说和诗歌取得更高的成就。这种独特的风格曾被时人称为“冰心体”，产生了广泛的影响。</p>
                <div id="img-pos">
                    <img src="./同学.jpg" alt="">
                    <img class="pos tl" src="./index1.png" alt="">
                    <img class="pos tr" src="./index2.png" alt="">
                    <img class="pos bl" src="./index3.png" alt="">
                    <img class="pos br" src="./index4.png" alt="">
                    <img class="pos mid" src="./timg.jpg" alt="">
                </div>
                <hr>
            </div>
        </div>
        <!-- 回到顶部 -->
        <div id="back-top"><a href="#">回到顶部</a></div>
    </body>
</html>